<template>
  <div class="edit-match-container">
    <h2>Edit Match Record</h2>
    <a-button type="link" @click="goBack">Back</a-button> <!-- 返回按钮 -->
    <a-form :model="form" @finish="onFinish">
      <a-form-item label="Opponent Name">
        <a-input v-model:value="form.opponentName" />
      </a-form-item>
      <a-form-item label="Position">
        <a-input v-model:value="form.position" />
      </a-form-item>
      <a-form-item label="Match Date">
        <a-date-picker v-model:value="form.matchDate" show-time />
      </a-form-item>
      <a-form-item label="Knockout Time">
        <a-input v-model:value="form.knockoutTime" />
      </a-form-item>
      <a-form-item label="Result">
        <a-input v-model:value="form.result" />
      </a-form-item>
      <a-form-item label="First Half Score">
        <a-input v-model:value="form.firstHalfScore" />
      </a-form-item>
      <a-form-item label="Second Half Score">
        <a-input v-model:value="form.secondHalfScore" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import axios from '../axios';
import dayjs from 'dayjs';

const route = useRoute();
const router = useRouter();

interface MatchDetail {
  matchId: number;
  opponentName: string;
  position: string;
  matchDate: string | null; // 允许 null 值
  knockoutTime: string;
  result: string;
  firstHalfScore: string;
  secondHalfScore: string;
  firstHalfMyLost: string;
  firstHalfOpponentLost: string;
  firstHalfLostSets: string;
  secondHalfMyLost: string;
  secondHalfOpponentLost: string;
  secondHalfLostSets: string;
}

const form = ref<MatchDetail>({
  matchId: Number(route.params.matchId),
  opponentName: '',
  position: '',
  matchDate: null,
  knockoutTime: '',
  result: '',
  firstHalfScore: '',
  secondHalfScore: '',
  firstHalfMyLost: '',
  firstHalfOpponentLost: '',
  firstHalfLostSets: '',
  secondHalfMyLost: '',
  secondHalfOpponentLost: '',
  secondHalfLostSets: ''
});

// 获取比赛记录详情
onMounted(async () => {
  const res = await axios.get(`/matchs/${route.params.matchId}`);
  const data = res.data.data;

  // 格式化日期
  form.value = {
    ...data,
    matchDate: data.matchDate ? dayjs(data.matchDate) : null, // 转换为 dayjs 对象
  };
});

// 提交表单
const onFinish = async () => {
  try {
    await axios.put(`/matchs/${route.params.matchId}`, form.value);
    message.success('match edit successfully');
    router.push({ name: 'MatchRecord' });
  } catch (err) {
    console.error('Failed to update match record', err);
    message.error('match edit failed');
  }
};

// 返回方法
const goBack = () => {
  router.push({ name: 'MatchRecord' });
};
</script>

<style scoped>
.edit-match-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

</style>